<template>
  <div>
    <avue-form :option="option" v-model="form" v-if="JSON.stringify(this.storeData.data)==='{}'"
               :upload-preview="uploadPreview"
               :upload-error="uploadError"
               :upload-delete="uploadDelete"
               :upload-after="uploadAfter"
               @submit="submit"></avue-form>
    <basic-container v-if="JSON.stringify(this.storeData.data)!=='{}'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>审批结果</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="know" >我已知晓</el-button>
          </div>
        <div v-for="o in storeData" :key="o" class="text item">
          <h4>{{'商店名称: ' + o.storeName }}</h4>
          <h4>{{'电话号码: ' + o.phone }}</h4>
          <span style="font-size: 20px">商店图片:</span><img style="width: 100px;height: 100px" :src="o.img" class="image">
          <h4>{{'是否通过: '}}
          <span v-if="o.approval==='0'">未审批</span>
          <span v-if="o.approval==='1'">通过</span>
          <span v-if="o.approval==='2'">未通过</span>
          </h4>
          <h4>{{'原因: ' + o.reason }}</h4>
        </div>
      </el-card>
    </basic-container>
  </div>
</template>

<script>
  import {joinStore,approvalMessage,remove} from "@/api/store/store";
  import {isvalidatemobile} from "@/util/validate";

  export default {
    name: "addstore",
    data() {
      return {
        storeData: {},
        form: {
          storeName:'',
          img:'',
          phone:'',
        },
        option: {
          labelWidth: 120,
          column: [
            {
              label: "商店名称",
              prop: "storeName",
              slot: true,
              search: true,
              rules: [{
                required: true,
                message: "请输入商店名称",
                trigger: "blur"
              }]
            },
            {
              label: "商店图像",
              prop: "img",
              propsHttp: {
                res: 'data'
              },
              type: 'upload',
              listType: 'picture-img',
              tip: '只能上传jpg/png用户头像，且不超过500kb',
              action: '/api/pxx_commodity/commodity/upload',
            },
            {
              label: "手机号",
              prop: "phone",
              rules: [{
                required: true,
                message: "请输入商店手机号",
                trigger: "blur"
              }]
            },
          ]
        }
      }
    },
    mounted(){
      this.approvalMessage();
    },
    computed: {},
    created() {
    },
    methods: {
      know(){
         remove(this.storeData.data.id).then(() => {
           this.$message({
             type: "success",
             message: "您可以重新申请！"
           });
           location.reload();
         });
      },
      approvalMessage: function () {
        approvalMessage().then((res) => {
          this.storeData = {
            data:res.data.data
          };
          });
      },
      uploadDelete() {
        return this.$confirm(`是否确定移除该选项？`);
      },
      uploadError() {
        this.$message.success('上传失败')
      },
      uploadAfter(res, done) {
        done()
      },
      uploadPreview(file,column,done){
        done()//默认执行打开方法
      },
      submit(done,loading) {
        if (this.form.img=== ''){
          this.$message.error("商店没有图片!");
          return;
        }
        var list = isvalidatemobile(this.form.phone);
        if (list.result === false) {
          this.$message.error(list.msg);
          return;
        }
        var store = this.form;
        joinStore(store).then(() => {
          this.$message({
            type: "success",
            message: "申请成功，请等待审批结果!"
          });
        }, error => {
          window.console.log(error);
          loading();
        },
        location.reload()
        );
      },
    }
  };
</script>

<style scoped="scoped" lang="scss">
</style>
